<template>
  <div class="container">
    <div class="common">
      <div class="relative">
        <img :src="pageImgArr.pic01" alt="">
        <span id="share" @click="shareForWechat">分享</span>
      </div>
    </div>
    <div class="relative nav" :class="{'fixed':scrollFixed}">
      <img v-lazy="pageImgArr.pic02" alt="">
      <div class="width_50_1" @click="getGoodsAction('forBoys')"></div>
      <div class="width_50_2" @click="getGoodsAction('forGirls')"></div>
    </div>
    <div :class="{'abandon':scrollFixed}" ref="abandon" ></div>
    <div class="module" v-for="(item,index) in pageGoodsIdArr" :key="index">
      <div class="module-title relative">
        <img v-lazy="item.moduleTitle01" alt="">
        <div class="define-goods top" :style="defineStyle">
          <SelfDefine :parentData="item.moduleData.slice(0,1)[0]" :styleData="{}" @childEvent="goForGoodsDetail"/>
        </div>
      </div>
      <div class="module-title relative">
        <img v-lazy="item.moduleTitle02" alt="">
        <div class="define-goods" :style="defineStyle">
          <SelfDefine :parentData="item.moduleData.slice(1,2)[0]" :styleData="{}" @childEvent="goForGoodsDetail"/>
        </div>
      </div>
      <div class="module-title"><img v-lazy="pageImgArr.pic05" alt=""></div>
      <div class="module-content">
        <div class="wrapper">
          <goods-item :parentData="item" :styleData="goodsStyle" @childEvent="goForGoodsDetail" v-for="(item,index) in item.moduleData.slice(2)" :key="index"/>
        </div>
      </div>
    </div>
    <div class="more">
      <img :src="pageImgArr.pic09" alt="">
      <special-item :parentData="item" @childEvent="goForSpecialDetail" v-for="(item,index) in moreData.specialArrList" :key="index"/>
    </div>
  </div>
</template>

<script>
  import GoodsItem from 'components/GoodsItems/lineThree.vue'
  import SelfDefine from 'components/GoodsItems/selfDefine.vue'
  import SpecialItem from 'components/GoodsItems/specialItem.vue'
  import MaskModal from 'components/maskDown/index.js'
  import { getGoodsListApi, handleMoreApi } from "@/apis/publicApi.js";
  export default {
    components:{GoodsItem,SelfDefine,SpecialItem},
    data(){
      return{
        isMaskLayer:false,//是否分享覆盖
        pageImgArr:{},
        goodsStyle:{width:'2.22rem'},//组件样式传入子组件
        defineStyle:{right:'0.5rem'},//自定义组件样式传入子组件
        scrollFixed:false,//是否固定tab
        pageStyle:'forBoys',//默认tab1
        pageGoodsIds:{
          forBoys:[
            1583519,1585371,1583745,1583749,1583505,1583507,1583509,1583751,1583753,1583755,
            1583511,1583521,1585373,1585377,1587043,1585381,1585383,1585385,1588733,1588735
          ],
          forGirls:[
            1586629,1585393,1585403,1585365,1585367,1585387,1585369,1585375,1585397,1585399,1585401,1585389,1585391,
            1585395,1585395,1583143,1583161,1583159,1583157,1583151,1583145,1583147,1583149,1583153
          ]
        },
        pageGoodsIdArr:[],
        moreData:{
          reqestIds:'70069,70073,70107,70097,70095,70071,70111,70063,70101,70075,70041,70051,70109,70079,70117,70085,70087,66153,70021,70077,70081,70083,70137,70135,70119,70093,70121,70123,70127',
          specialArrList:[]
        }
      }
    },
    created(){
      if( this.shareJudge('isshare') ){ MaskModal(); }
      this.initPageImg();
      this.getGoodsAction();
    },
    mounted(){
      let that=this;
      window.onscroll = function() {
        let tabLimitDis = that.$refs.abandon.offsetTop;
        let pageTop = window.scrollY;
        if (pageTop >= tabLimitDis) { that.scrollFixed=true;} 
        else {that.scrollFixed=false;}
      };
      this.moreSpecial();
    },
    methods:{
      initPageImg(){
        this.pageImgArr={
          pic01:require('../../../assets/img/musicDay/xryd01.jpg'),
          pic02:require('../../../assets/img/musicDay/xryd02.jpg'),
          pic05:require('../../../assets/img/musicDay/xryd05.jpg'),
          pic09:require('../../../assets/img/musicDay/xryd09.jpg')
        }
      },
      goForGoodsDetail(id){
        this.$navtiveUtils.jump2goods(id);
      },
      goForSpecialDetail(id){
        this.$navtiveUtils.jump2special(id);
      },
      getGoodsAction(style){
        if(this.pageStyle==style){ return false}
        this.pageGoodsIdArr=[];
        this.pageStyle=arguments[0]?arguments[0]:'forBoys';
        this.defineStyle.right= this.pageStyle=='forBoys'? '0.5rem' : '4.5rem';
        let param=this.pageGoodsIds[this.pageStyle].toString();
        getGoodsListApi(param).then(res =>{
          let baseImgIdx= this.pageStyle=='forBoys'? 3 :6;
          let tempData=[{}];
          tempData.forEach((item,index) =>{
            item.moduleTitle01 = require(`../../../assets/img/musicDay/xryd0${baseImgIdx+index}.jpg`);
            item.moduleTitle02 = require(`../../../assets/img/musicDay/xryd0${baseImgIdx+index+1}.jpg`);
            item.moduleData= res.data;
          });
          this.pageGoodsIdArr=tempData;
        })
      },
      moreSpecial() {
        handleMoreApi(this.moreData.reqestIds).then(res => {
          this.moreData.specialArrList = res.data;
        });
      },
      shareJudge(e) {
        let temp = window.location.search.replace("?", "").split("&");
        let isFlag = false;
        for (let index = 0; index < temp.length; index++) {
          isFlag += temp[index].split("=").includes(e);
        }
        return isFlag;
      },
      shareForWechat() {
        let that = this;
        let pageTitle=document.title ;
        setTimeout(function() {
          that.$navtiveUtils.share(pageTitle, "潮流精选好货，限时折扣中，快来抢购！","");
        }, 300);
      }
    }
  }
</script>
<style>
html,body{
  background-image: url('../../../assets/img/musicDay/xryd11.jpg');
  background-repeat: repeat-y;
  background-size: contain;
}
</style>

<style lang="less" scoped>
.relative{
  position: relative;
  #share{
    width: 0.55rem;
    height: 0.45rem;
    padding: 0 0.1rem 0 0.25rem;
    line-height: 0.45rem;
    font-size: 0.24rem;
    color: #fff;
    border-radius: 0.45rem 0 0 0.45rem;
    background: #E28B66;
    position: absolute;
    top: 0.2rem;right: 0;
  }
  .remix-goods{
    width: 2.25rem;
    height: 2.23rem;
    position: absolute;
    overflow: hidden;
    top: 0.08rem;right: 1.3rem;
    &.remix01{top: 0.35rem;}
    &.remix03{top: 1rem;left: 1.3rem;}
    &.remix04{top: 0.09rem;left: 1.3rem;}
  }
}
.nav{
  width: 100%;
  height: 1.2rem;
  overflow: hidden;
  position: relative;
  div[class*='width']{
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;left: 0;
    &.width_50_2{left: 50%;}
  }
  &.fixed{
    position: fixed;
    top: 0;left: 0;
    z-index: 50;
  }
}
.abandon{padding-top:1.2rem;background: #F62E17; }
.module{
  overflow: hidden;
  .define-goods{
    width: 2.42rem;
    height: 2.42rem;
    position: absolute;
    top: 0rem;
    &.top{top: 0.4rem;}
  }
  .module-content{
    background-image: url('../../../assets/img/musicDay/xryd12.jpg');
    background-repeat: repeat-y;
    background-size: contain;
    .wrapper{
      display: flex;
      flex-wrap: wrap;
      margin: 0 0.32rem;
    }
  }
}
.goods-container{
  display: flex;
  flex-wrap: wrap;
  font-family: '微软雅黑';
  padding: 0.1rem 0.1rem 0rem;
  font-size: 0.3rem;
}
.more-title{
  line-height: 0.75rem;
  color: #fff;
  font-size: 0.3rem;
  text-align: center;
  font-weight: 600;
}
.more {
  .special {position: relative;}
  .info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 0.6rem;
    padding: 0 0.3rem;
    line-height: 0.6rem;
    color: #666;
    font-size: 0.28rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    box-sizing: border-box;
    .title {
      width: 55%;
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .date {
      width: 30%;
      height: 100%;
      text-align: right;
    }
  }
}
</style>